<template>
  <div class="detail-container">
    <!-- 基本信息卡片 -->
    <div class="card">
      <div class="card-header">
        <span class="card-title">基本信息</span>
      </div>
      <div class="card-content">
        <div class="info-list">
          <div class="info-item">
            <span class="info-label">审批事项</span>
            <span class="info-value">{{approvalInfo.name}}</span>
          </div>
          <div class="info-item">
            <span class="info-label">办理期限</span>
            <div class="info-value deadline" :class="{'is-overdue': isOverdue}">
              <span class="deadline-text">{{approvalInfo.deadline}}</span>
            </div>
          </div>
          <div class="info-item">
            <span class="info-label">办理层级</span>
            <span class="info-value">{{approvalInfo.level}}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 组卷情况卡片 -->
    <div class="card">
      <div class="card-header">
        <span class="card-title">组卷情况</span>
      </div>
      <div class="card-content">
        <div class="text-content">
          <p class="content-text">{{approvalInfo.documentSituation}}</p>
        </div>
      </div>
    </div>
    
    <!-- 审批情况卡片 -->
    <div class="card">
      <div class="card-header">
        <span class="card-title">审批情况</span>
      </div>
      <div class="card-content">
        <div class="document-list">
          <div class="document-item" v-for="(doc, index) in approvalInfo.documents" :key="index">
            <div class="document-icon" :class="getDocumentClass(doc.type)">
              <span class="icon-text">{{getDocumentIcon(doc.type)}}</span>
            </div>
            <div class="document-info">
              <span class="document-name">{{doc.name}}</span>
              <span class="document-date">上传时间：{{doc.date}}</span>
            </div>
            <div class="document-action">
              <span class="action-text">查看</span>
            </div>
          </div>
          
          <div class="empty-tip" v-if="approvalInfo.documents.length === 0">
            <span class="empty-text">暂无审批文件</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 模拟数据
const approvalInfo = ref({
  name: '建设用地规划许可证',
  deadline: '2025-04-30',
  level: '市级审批',
  status: '未办理',
  documentSituation: '该项目需要提交建设项目选址意见书、建设用地申请表、土地权属证明等材料。目前已收集建设项目选址意见书和建设用地申请表，尚缺土地权属证明原件。根据相关规定，所有材料必须齐全后方可进入下一审批环节。请尽快补充完整材料，以免影响项目进度。',
  documents: [
    {
      name: '建设项目选址意见书',
      type: 'pdf',
      date: '2025-02-15'
    },
    {
      name: '建设用地申请表',
      type: 'doc',
      date: '2025-02-10'
    },
    {
      name: '土地权属证明',
      type: 'img',
      date: '2025-02-05'
    }
  ]
})

// 计算是否超期
const isOverdue = computed(() => {
  const deadline = new Date(approvalInfo.value.deadline)
  const today = new Date()
  return today > deadline
})

// 获取文档图标
const getDocumentIcon = (type) => {
  switch(type) {
    case 'pdf':
      return 'PDF'
    case 'doc':
      return 'DOC'
    case 'img':
      return 'IMG'
    default:
      return 'FILE'
  }
}

// 获取文档类型样式
const getDocumentClass = (type) => {
  return {
    'icon-pdf': type === 'pdf',
    'icon-doc': type === 'doc',
    'icon-img': type === 'img'
  }
}

// 获取详情数据
const getApprovalDetail = (id) => {
  // 实际项目中，这里应该调用API获取详情数据
  console.log('获取审批详情，ID:', id)
  // 模拟API调用
  // axios.get(`${config.getUrl('project_approval_detail')}?id=${id}`)
  //   .then(response => {
  //     if (response.data.success) {
  //       approvalInfo.value = response.data.result
  //     }
  //   })
  //   .catch(error => {
  //     console.error('获取审批详情失败:', error)
  //   })
}

onMounted(() => {
  const id = route.params.id
  
  if (id) {
    getApprovalDetail(id)
  }
})
</script>

<style scoped>
/* 全局变量 */
:root {
  --primary-color: #2D5BFF;
  --success-color: #10B981;
  --warning-color: #F59E0B;
  --danger-color: #EF4444;
  --background-color: #F8FAFC;
  --card-color: #FFFFFF;
  --text-primary: #1A1F36;
  --text-secondary: #4E5D78;
  --text-tertiary: #8A94A6;
  --border-radius: 8px;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  --transition: all 0.2s ease;
}

/* 基础样式 */
.detail-container {
  min-height: 100vh;
  background: var(--background-color);
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 卡片样式 */
.card {
  background: var(--card-color);
  margin-bottom: 20px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card-header {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.card-content {
  padding: 20px;
}

/* 信息列表 */
.info-list .info-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.info-list .info-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.info-list .info-item:first-child {
  padding-top: 0;
}

.info-label {
  width: 120px;
  font-size: 16px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.info-value {
  flex: 1;
  font-size: 16px;
  color: var(--text-primary);
  word-break: break-all;
}

.info-value.deadline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-value.deadline.is-overdue .deadline-text {
  color: var(--danger-color);
}

/* 文本内容 */
.text-content {
  padding: 5px 0;
}

.content-text {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: justify;
}

/* 文档列表 */
.document-list .document-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.document-list .document-item:last-child {
  border-bottom: none;
}

.document-icon {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.document-icon .icon-text {
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
}

.document-icon.icon-pdf {
  background: linear-gradient(135deg, #FF5252 0%, #FF1744 100%);
}

.document-icon.icon-doc {
  background: linear-gradient(135deg, #2979FF 0%, #2962FF 100%);
}

.document-icon.icon-img {
  background: linear-gradient(135deg, #00C853 0%, #00B248 100%);
}

.document-info {
  flex: 1;
}

.document-info .document-name {
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 5px;
  display: block;
}

.document-info .document-date {
  font-size: 14px;
  color: var(--text-tertiary);
}

.document-action .action-text {
  font-size: 16px;
  color: var(--primary-color);
  padding: 8px 15px;
  cursor: pointer;
}

.empty-tip {
  padding: 40px 0;
  text-align: center;
}

.empty-tip .empty-text {
  font-size: 16px;
  color: var(--text-tertiary);
}

@media (min-width: 768px) {
  .info-label {
    width: 150px;
  }
}
</style>
